<template>
  <div class="edit">
    <!-- 导航条 -->
    <van-nav-bar
      left-arrow
      @click-left="$router.back()"
      title="编辑资料"
    ></van-nav-bar>

    <!-- 头像部分 -->
    <div class="avatar">
      <van-image
        fit="cover"
        @click="$refs.touxiang.chooseFile()"
        round
        :src="list.photo"
      />
    </div>
    <van-uploader :after-read="afterRead" ref="touxiang" v-show="false" />
    <!-- 信息展示 -->
    <van-cell-group>
      <van-cell is-link title="名称" :value="list.name" @click="show" />
      <van-cell
        is-link
        title="性别"
        :value="list.gender === 1 ? '男' : '女'"
        @click="xb = true"
      />
      <van-cell is-link title="生日" :value="list.birthday" @click="sr" />
    </van-cell-group>
    <!-- 弹出框 名字 -->
    <van-dialog
      v-model="showname"
      title="标题"
      show-cancel-button
      @confirm="update"
    >
      <van-cell-group>
        <van-field ref="fname" v-model="name" placeholder="请输入用户名" />
      </van-cell-group>
    </van-dialog>
    <!-- 性别 弹出框子 -->
    <van-popup v-model="xb" position="bottom" :style="{ height: '25%' }">
      <van-nav-bar
        left-arrow
        @click-left="xb = false"
        title="编辑资料"
      ></van-nav-bar>
      <van-cell title="男" is-link @click="xingb(1)" />
      <van-cell title="女" is-link @click="xingb(0)" />
    </van-popup>
    <!-- 时间 弹出框子 -->
    <van-popup v-model="sj" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        @confirm="shijanfn"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
      />
    </van-popup>
    <!-- 裁切 功能书写 -->
    <div class="mask" v-if="ishowmack">
      <VueCropper
        :img="img"
        autoCrop
        fixed
        centerBox
        autoCropWidth="120"
        autoCropHeight="120"
        ref="cropper"
      ></VueCropper>
    </div>
    <div class="btns" v-show="ishowmack">
      <van-button type="primary" @click="qx">取消</van-button>
      <van-button type="primary" @click="qd">确定</van-button>
    </div>
  </div>
</template>

<script>
import { geren } from '@/api/geren'
import { editUserProfile, editserphoto } from '@/api/user'
import { mapState } from 'vuex'
import moment from 'moment'
import { VueCropper } from 'vue-cropper'
export default {
  components: {
    VueCropper
  },
  data() {
    return {
      ishowmack: false,
      list: [],
      showname: false,
      value: '',
      name: '',
      xb: false,
      sj: false,
      minDate: new Date(1995, 0, 1),
      maxDate: new Date(2021, 12, 31),
      currentDate: '',
      img: ''
    }
  },
  name: 'Edit',

  computed: {
    ...mapState('user', ['token'])
  },
  async created() {
    const { data: res } = await geren()
    // console.log(res)
    this.list = res
    this.currentDate = new Date(this.list.birthday)
  },
  methods: {
    afterRead(file) {
      // console.log(file)
      this.ishowmack = true
      this.img = file.content
    },
    async show() {
      this.showname = true
      this.name = this.list.name
      await this.$nextTick()
      this.$refs.fname.focus()
    },
    async update() {
      const res = await editUserProfile({
        name: this.name
      })
      console.log(res)
      this.$toast('修改成功')
      const { data: res1 } = await geren()
      // console.log(res1)
      this.list = res1
    },
    async xingb(num) {
      // console.log(num)
      const data = await editUserProfile({
        gender: num
      })
      console.log(data)
      const { data: res } = await geren()
      this.list = res
    },
    sr() {
      this.sj = true
    },
    async shijanfn() {
      this.sj = false
      console.log(this.currentDate)
      const data = await editUserProfile({
        birthday: moment(this.currentDate).format('YYY-MM-DD')
      })
      console.log(data)
      console.log(moment(this.currentDate).format('YYY-MM-DD'))
      console.log(this.currentDate)
    },
    qx() {
      this.ishowmack = false
    },
    async qd() {
      this.$refs.cropper.getCropBlob(async (data) => {
        // do something
        // console.log(data)
        const fd = new FormData()
        fd.append('photo', data)
        const one = await editserphoto(fd)
        console.log(one)
        this.$toast('头像上传成功')
      })
    }
  }
}
</script>

<style lang="less" scoped>
.btns {
  z-index: 9999;
  position: absolute;
  bottom: 75px;
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.edit {
  ::v-deep {
    .van-dialog__content {
      padding: 10px;
      .van-field {
        border-radius: 5px;
        border: 1px solid #ccc;
      }
    }
  }
}

.avatar {
  padding: 20px 0;
  text-align: center;
  position: relative;
  .van-image {
    width: 120px;
    height: 120px;
  }
  .upload {
    opacity: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    ::v-deep {
      .van-uploader__input {
        width: 120px;
        height: 120px;
      }
    }
  }
}

// 使用vue-cropper插件，必须指定父盒子的宽度和高度
.demo {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9;
}

.mask {
  width: 100%;
  height: 90%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  .confirm,
  .cancel {
    position: absolute;
    bottom: 0;
  }
  .confirm {
    left: 0;
  }
  .cancel {
    right: 0;
  }
}
</style>
